<template>
	<view class="searchFixed row j-sa flex-column">
		<view class="search">
			<uni-easyinput class="test" prefixIcon="search" v-model="station_name" confirmType="search"
				placeholder="关键词搜索  |  站点名称"  @confirm="getBreakDownListFilter" @clear="getBreakDownListFilter"></uni-easyinput>
		</view>
		<view class="filter row">
			<view class="filterItem row j-center a-center" style="width: 40%;">
				<uni-datetime-picker type="date" v-model="created_at" @change="getBreakDownListFilter($event,'time')" />
			</view>
			<view class="filterItem flex-1 row j-center a-center">
				<uni-data-select style="width: 100%;" v-model="breakdown_level" placeholder="级别" :localdata="level_options"
					@change="getBreakDownListFilter"></uni-data-select>
			</view>
			<view class="filterItem flex-1 row j-center a-center">
				<uni-data-select style="width: 100%;" v-model="status" placeholder="状态" :localdata="status_options"
					@change="getBreakDownListFilter"></uni-data-select>
			</view>
		</view>
	</view>
	<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="content">
			<view class="alarmItem" v-for="(item,index) in hitchList" :key="index">
				<view class="itemTop row j-sb a-center">
					<view class="alarmName">
						<view class="name">
							{{item.event_name}}
						</view>
						<view class="time">
							{{item.created_at}}
						</view>
					</view>
					<view class="alarmStatus row j-center a-center" :class="{yanzhong: item.breakdown_level === '严重'}">
						{{item.breakdown_level}}
					</view>
				</view>
				<view class="alarmDesc">
					<text style="color: #3665FF;" @click="goStationBoard(item.station_id)">【{{item.station_name}}】</text>{{item.desc}}
				</view>
				<view class="alarmHandle row j-sb a-center">
					<view class="handleTime">
						{{item.handle_time}}
					</view>
					<view class="handle row a-center">
						<view class="handleName">
							{{item.status}} - {{item.operator_name}}
						</view>
						<button v-if="item.status !== '已处理'" class="handleBtn row j-center a-center" type="default"
							size="mini" @click="goHandleHitch(item)">
							处理
						</button>
						<button v-else class="handleBtn1 row j-center a-center" type="primary" size="mini"  @click="goHandleHitch(item)">
							修改
						</button>
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { request } from '@/utils'
	import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const breakdown_id = ref('')
	onShow(() => {
		breakdown_id.value = uni.getStorageSync('breakdown_id');
		hitchList.value = []
		getMescroll().resetUpScroll();
		// getMescroll().scrollTo(0)
	})
	const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom)
	const downOption = {
		auto: false //是否在初始化后,自动执行downCallback; 默认true
	}
	const station_name = ref('')
	const created_at = ref('')
	const breakdown_level = ref('')
	const level_options = ref([
		{ value: 2, text: "严重" },
		{ value: 1, text: "一般" },
	])
	const status = ref('')
	const status_options = ref([
		{ value: 1, text: "已处理" },
		{ value: 0, text: "未处理" },
	])
	const hitchList = ref<any>([])
	const page = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const getBreakDownList = async () => {
		const res : any = await request('/api/v1/getBreakDownList?permission=hitchList', {
			station_name: station_name.value,
			created_at: created_at.value,
			status: status.value,
			breakdown_level: breakdown_level.value,
			id: breakdown_id.value,
			page: page.value,
			pageSize: pageSize.value
		}, 'GET')
		uni.removeStorage({
			key: 'breakdown_id'
		})
		if (page.value == 1) hitchList.value = [];
		hitchList.value = hitchList.value.concat(res.data.data.data)
		total.value = res.data.data.total
	}
	/* 自定义下拉刷新的回调,不使用useMescroll的downCallback */
	const downCallback = async (mescroll : any) => {
		breakdown_id.value = ''
		page.value = 1
		pageSize.value = 10
		await getBreakDownList()
		mescroll.endSuccess();
	}

	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
	const upCallback = async (mescroll : any) => {
		page.value = mescroll.num
		pageSize.value = mescroll.size
		await getBreakDownList()
		mescroll.endBySize(10, total.value);
	}
	const getBreakDownListFilter = (e:any, time:any) => {
		if( time) {
			created_at.value = e
		}
		hitchList.value = []
		getMescroll().resetUpScroll();
		getMescroll().scrollTo(0)
	}
	const goHandleHitch = (item:any) => {
		uni.navigateTo({
			url: `/subpkg/handlehitch/handlehitch?detail=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	const goStationBoard = (id:any) => {
		uni.navigateTo({
			url: `/subpkg/stationBoard/stationBoard?id=${id}`
		})
	}
</script>

<style scoped lang="scss">
	::v-deep .is-input-border {
		background-color: #ffffff !important;
		opacity: 0.9;
		border: 1rpx solid #fff !important;
		border-radius: 40rpx;
	}

	::v-deep .uni-date-x--border {
		border: none;
	}

	::v-deep .uni-date-x {
		border-radius: 48rpx;
	}

	::v-deep .uni-date-x .icon-calendar {
		padding-left: 10rpx;
	}

	::v-deep .uni-select {
		border: none;
		font-size: 24rpx;
		// border: 1px solid #000;
	}

	::v-deep .uni-date__x-input {
		font-size: 24rpx !important;
		height: unset !important;
		line-height: unset !important;
		text-indent: 10rpx;
		text-align: center;
	}

	::v-deep .uni-icons {
		font-size: 36rpx !important;
	}

	::v-deep .uni-select__input-text {
		text-align: center;
	}

	.searchFixed {
		padding: 0 32rpx;
		height: 170rpx;
		// border: 1px solid #000;
		background-color: #F6F6F6;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 999;

		.search {
			height: 74rpx;
		}

		.filter {
			height: 64rpx;
			background-color: #ffffff;
			border-radius: 48rpx;

			.filterItem {
				font-size: 24rpx;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					height: 50%;
					border-left: 1px solid #DBDBDE;
				}

				&:last-child {
					&::after {
						border-left: none;
					}
				}
			}
		}
	}

	.content {
		margin-top: 170rpx;
		padding: 32rpx;
		background-color: #F6F6F6;
		min-height: calc(100vh - 170rpx);

		.alarmItem {
			height: 265rpx;
			padding: 20rpx 30rpx;
			box-shadow: 0px 3px 6px rgba(149, 149, 149, 0.16);
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 28rpx;

			.itemTop {
				border-bottom: 1px solid #E3F1F0;
				padding-bottom: 12rpx;

				.alarmName {
					.name {
						color: #484848;
						font-size: 22rpx;
						font-weight: bold;
					}

					.time {
						color: #8E8E93;
						font-size: 20rpx;
						margin-top: 7rpx;
					}
				}

				.alarmStatus {
					width: 76rpx;
					font-size: 22rpx;
					height: 36rpx;
					border-radius: 16rpx;
					background: rgba(255, 179, 29, 0.39);
					font-weight: bold;
					color: #FF8000;
				}

				.yanzhong {
					background: rgba(245, 89, 89, 0.39);
					color: #F55959;
				}
			}

			.alarmDesc {
				font-size: 28rpx;
				color: #151516;
				font-weight: bold;
				margin: 10rpx 0;
				line-height: 1.5em;
				height: 100rpx;
			}

			.alarmHandle {
				color: #3665FF;
				font-size: 22rpx;

				.handleTime {
					font-weight: bold;
				}

				.handle {
					.handleName {
						font-weight: bold;
					}

					.handleBtn {
						margin-left: 30rpx;
						color: #ffffff;
						border-radius: 20rpx;
						background: #3665FF;
						font-size: 22rpx;
					}

					.handleBtn1 {
						margin-left: 30rpx;
						color: #ffffff;
						border-radius: 20rpx;
						background: #3665FF;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>